@import '../../styles/index';

@timepicker-prefix-cls: ~"@{ane-prefix}-timepicker";

.form-inline .@{timepicker-prefix-cls} {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}
.@{timepicker-prefix-cls} {
    position: relative;

    &-icon {
        position: absolute;
        right: 8px;
        top: 50%;
        margin-top: -7px;
    }
    &-clear {
        position: absolute;
        right: 8px;
        top: 50%;
        margin-top: -7px;
        padding: 1px;
        cursor: pointer;
        display: none;
        background: #fff;
    }
    &:hover &-clear {
        display: inline-block;
    }
    & &-input {
        background-color: #fff;
    }
}

.@{timepicker-prefix-cls}-panel-container {
    background-color: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    user-select: none;
}
.@{timepicker-prefix-cls}-panel {
    width: 252px;
}

.@{timepicker-prefix-cls}-view {
    height: 198px;

    &-combobox {
        width: 100%;
    }

    &-select {
        display: inline-block;
        width: 33.33%;
        border-left: 1px solid @gray-lighter;
        float: left;
        overflow: hidden;

        &:first-child {
            border-left: none;
        }

        &:hover {
            overflow: auto;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            width: 100%;
            max-height: 200px;

            &:after {
                content: "";
                display: block;
                height: 176px;
            }
        }
        li {
            text-align: center;
            list-style: none;
            box-sizing: content-box;
            margin: 0;
            width: 100%;
            height: 24px;
            line-height: 24px;
            cursor: pointer;

            &:hover {
                background: @item-hover-bg;
            }
        }

        & &-option-selected {
            background: @brand-primary;
            font-weight: 700;
            color: #fff;

            &:hover {
                background: @brand-primary;
            }
        }
    }
}